<template>
  <el-container class="layout-container">
    <el-header height="60px">
      <div class="header-content">
        <div class="logo">原始记录在线设计</div>
        <div class="header-right">
          <el-dropdown @command="handleDropdownCommand">
            <span class="user-info">
              <el-avatar 
                :size="32" 
                :src="userAvatar" 
                style="margin-right: 8px"
              >
                {{ userInitials }}
              </el-avatar>
              <span>{{ userName }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <el-icon><User /></el-icon>
                  个人资料
                </el-dropdown-item>
                <el-dropdown-item command="changePassword">
                  <el-icon><Lock /></el-icon>
                  修改密码
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    
    <el-container>
      <el-aside width="200px" v-if="!route.meta.hideMenu">
        <el-menu
          :router="true"
          class="el-menu-vertical"
          :default-active="route.path"
          background-color="#304156"
          text-color="#fff"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/projects">
            <el-icon><Document /></el-icon>
            <span>项目管理</span>
          </el-menu-item>
          <el-menu-item index="/templates">
            <el-icon><DocumentCopy /></el-icon>
            <span>模板管理</span>
          </el-menu-item>
          <el-menu-item v-if="isAdmin" index="/users">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <!-- <el-menu-item index="/sections">
            <el-icon><Collection /></el-icon>
            <span>访视</span>
          </el-menu-item>
          <el-menu-item index="/forms">
            <el-icon><List /></el-icon>
            <span>表单</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>
      <el-main style="height: calc(100vh - 60px);">
        <router-view></router-view>
      </el-main>
    </el-container>

    <!-- 修改密码：改为通过 gDialog 调起的独立组件 -->
  </el-container>
</template>

<script setup>
import { computed } from 'vue'
import { Document, Collection, List, ArrowDown, User, Lock, SwitchButton, DocumentCopy } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage, ElMessageBox } from 'element-plus'
import { addDialog } from '@/components/gDialog'
import ChangePasswordDialog from '@/components/modal/ChangePasswordDialog.vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const isAdmin = computed(() => authStore.getUserRole === 'admin')

// 用户信息计算属性
const userName = computed(() => {
  const user = authStore.getUser
  if (user?.profile?.firstName && user?.profile?.lastName) {
    return `${user.profile.firstName}${user.profile.lastName}`
  }
  return user?.username || '用户'
})

const userInitials = computed(() => {
  const user = authStore.getUser
  if (user?.profile?.firstName && user?.profile?.lastName) {
    return `${user.profile.firstName.charAt(0)}${user.profile.lastName.charAt(0)}`
  }
  return user?.username?.charAt(0).toUpperCase() || 'U'
})

const userAvatar = computed(() => {
  // 可以根据用户信息返回头像URL
  return null // 暂时不设置头像
})

// 处理下拉菜单命令
const handleDropdownCommand = async (command) => {
  switch (command) {
    case 'profile':
      handleProfile()
      break
    case 'changePassword':
      handleChangePassword()
      break
    case 'logout':
      await handleLogout()
      break
  }
}

const handleProfile = () => {
  ElMessage.info('个人资料功能待开发')
}

const handleChangePassword = () => {
  addDialog({
    title: '修改密码',
    width: '400px',
    component: ChangePasswordDialog
  })
}

const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    authStore.logout()
    ElMessage.success('已退出登录')
    router.push('/login')
  } catch (error) {
    // 用户取消退出
  }
}

// 密码修改提交已迁移至对话框组件内部
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  padding: 0;
}

.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #606266;
}

.user-info .el-icon {
  margin-left: 4px;
}

.el-aside {
  background-color: #304156;
  color: #fff;
}

.el-menu-vertical {
  border-right: none;
}

.el-main {
  background-color: #f0f2f5;
  padding: 20px;
}
</style> 